<template>
  <div class="article-list-component" :class="{ 'loading': loading }">
    <div v-if="loading" class="loading-overlay">
      <a-spin size="large" />
    </div>
    
    <div v-if="articles.length === 0 && !loading" class="empty-state">
      <div class="empty-icon">📝</div>
      <p>暂无文章</p>
    </div>
    
    <div v-else class="article-items">
      <div v-for="article in articles" :key="article.id" class="article-item">
        <div class="article-info">
          <h3 class="article-title" @click="$emit('view', article)">
            {{ article.title }}
          </h3>
          
          <div class="article-meta">
            <span class="meta-item">
              <CalendarOutlined/> {{ formatDate(article.createTime) }}
            </span>
            <span class="meta-item">
              <EyeOutlined/> {{ article.viewCount || 0 }} 次阅读
            </span>
            <span class="meta-item" v-if="article.categoryId">
              <AppstoreOutlined/> {{ getCategoryName(article.categoryId) }}
            </span>
            <!-- <span class="meta-item" :class="getStatusClass(article.status)">
              {{ getStatusText(article.status) }}
            </span> -->
          </div>
          
          <div class="article-summary" v-if="article.summary">
            {{ article.summary }}
          </div>
        </div>
        
        <div class="article-cover" v-if="article.coverImage" @click="$emit('view', article)">
          <img :src="getStaticUrl(article.coverImage)" :alt="article.title">
        </div>
        
        <div class="article-actions">
          <a-button type="primary" size="small" @click="$emit('edit', article)">
            <template #icon><EditOutlined /></template>
            编辑
          </a-button>
          <a-button size="small" @click="$emit('view', article)">
            <template #icon><EyeOutlined /></template>
            查看
          </a-button>
          <a-button type="danger" size="small" @click="$emit('delete', article)">
            <template #icon><DeleteOutlined /></template>
            删除
          </a-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import { EditOutlined, EyeOutlined, DeleteOutlined,CalendarOutlined,AppstoreOutlined  } from '@ant-design/icons-vue';
import { useCategoryStore } from '@/stores/category';
import { getStaticUrl } from '@/utils/url';

const props = defineProps({
  articles: {
    type: Array,
    default: () => []
  },
  loading: {
    type: Boolean,
    default: false
  }
});

defineEmits(['edit', 'view', 'delete']);

const categoryStore = useCategoryStore();

// 格式化日期
const formatDate = (dateStr) => {
  if (!dateStr) return '';
  const date = new Date(dateStr);
  return date.toLocaleDateString('zh-CN', { 
    year: 'numeric', 
    month: 'long', 
    day: 'numeric' 
  });
};

// 获取分类名称
const getCategoryName = (categoryId) => {
  const category = categoryStore.categories.find(c => c.id === categoryId);
  return category ? category.name : '未分类';
};

// 获取状态文本
const getStatusText = (status) => {
  return status === 1 ? '已发布' : '草稿';
};

// 获取状态CSS类
const getStatusClass = (status) => {
  return status === 1 ? 'status-published' : 'status-draft';
};
</script>

<style scoped>
.article-list-component {
  position: relative;
  min-height: 100px;
}

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.empty-state {
  text-align: center;
  padding: 40px 0;
  color: #999;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.article-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.article-item {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  display: flex;
  gap: 20px;
}

.article-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.article-title {
  margin: 0 0 10px;
  font-size: 1.2rem;
  cursor: pointer;
  transition: color 0.3s;
}

.article-title:hover {
  color: #1890ff;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 10px;
}

.meta-item {
  display: flex;
  align-items: center;
}

.icon-calendar::before {
  content: '📅';
  margin-right: 5px;
}

.icon-eye::before {
  content: '👁️';
  margin-right: 5px;
}

.icon-category::before {
  content: '📂';
  margin-right: 5px;
}

.status-published {
  color: #52c41a;
}

.status-draft {
  color: #faad14;
}

.article-summary {
  color: #666;
  margin-top: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  max-width: 400px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.article-cover {
  width: 150px;
  height: 100px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
}

.article-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-actions {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}

@media (max-width: 768px) {
  .article-item {
    flex-direction: column;
  }
  
  .article-cover {
    width: 100%;
    height: 180px;
    order: -1;
  }
}
</style> 